<script setup lang="ts">
import VChart from 'vue-echarts'
import { useChartTooltipTheme } from '@/mixins/MixinChartTooltipTheme'
import { getWarningMsgRanking } from '@/api/modules/alarm'
import type { VChartInstance } from '@/types'
import { useChartAutoResize } from '@/mixins/MixinChartAutoResize'

interface WarningMsgRankingItem {
  indicatorName: string
  indicatorNumber: string
  num: number
  totalNum: number
}

const type = ref<0 | 1 | 2>(0)
const lists = shallowRef<WarningMsgRankingItem[]>([])

const tooltipTheme = useChartTooltipTheme()
const { theme } = storeToRefs(useDesignStore())
function getOption(item: WarningMsgRankingItem) {
  return {
    grid: {
      show: false,
      left: 0,
      right: 80,
      bottom: 0,
      top: 0,
      height: 50,
      containLabel: true,
    },
    xAxis: { show: false, type: 'value', axisLabel: { show: false }, max: item.totalNum },
    yAxis: [
      { show: false, type: 'category', axisLabel: { show: false }, data: [item.indicatorName] },
      {
        show: true,
        offset: 50,
        type: 'category',
        axisTick: 'none',
        axisLine: 'none',
        axisLabel: {
          inside: true,
          color: unref(theme) === 'dark' ? '#fff' : '#000',
        },
        data: [item.num],
      },
      {
        type: 'category',
        axisTick: 'none',
        axisLine: 'none',
      },
    ],
    tooltip: {
      trigger: 'axis',
      valueFormatter: (value: number) => {
        return `${value}` + '次'
      },
      axisPointer: {
        lineStyle: {
          width: 0,
          opacity: 0,
        },
      },
      position(point: any) {
        // 固定在顶部
        return [point[0], '10%']
      },
      ...tooltipTheme,
    },
    series: [
      {
        name: `${['本周', '本月', '本年'][unref(type)]}告警次数`,
        type: 'bar',
        data: [item.num],
        barWidth: 20,
        boundaryGap: false,
        z: 1,
      },
      {
        type: 'bar',
        data: [item.totalNum],
        barGap: '-100%',
        barWidth: 20,
        tooltip: { show: false },
        z: 0,
        itemStyle: {
          color: unref(theme) === 'dark' ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.1)',
        },
      },
    ],
  }
}

async function getData() {
  try {
    const { data } = await getWarningMsgRanking(unref(type))
    lists.value = data || []
  }
  catch (e) { }
}

watchEffect(() => {
  getData()
})
const chartRef = ref<VChartInstance>()

useChartAutoResize(chartRef)
</script>

<template>
  <div class="min-w-500px flex flex-col">
    <div class="flex items-center p-3">
      <span class="pl-2 line-height-none" style="border-left: 4px solid var(--el-color-primary);">告警指标排名</span>
      <div class="ml-auto flex items-center">
        <ElRadioGroup v-model="type" style="--el-border: 1px solid #888;" size="small">
          <ElRadioButton label="本周" :value="0" />
          <ElRadioButton label="本月" :value="1" />
          <ElRadioButton label="本年" :value="2" />
        </ElRadioGroup>
      </div>
    </div>
    <div class="flex-auto overflow-auto py-3">
      <div class="h-full w-full overflow-auto">
        <div v-for="(item, index) in lists" :key="item.indicatorNumber" class="flex items-center gap-3 px-3 py-2">
          <div
            class="h-10 w-10 flex flex-shrink-0 items-center justify-center rounded bg-gray-4 text-white dark:bg-gray-7"
          >
            {{ index + 1 }}
          </div>
          <div class="w-40 flex-shrink-0">
            <ElTooltip :content="item.indicatorNumber" placement="top" :disabled="item.indicatorNumber.length < 20">
              <div class="fs-14 overflow-hidden text-ellipsis text-gray font-mono dark:text-gray-3">
                {{ item.indicatorNumber }}
              </div>
            </ElTooltip>
            <ElTooltip :content="item.indicatorName" placement="top" :disabled="item.indicatorName.length < 10">
              <div class="fs-14 mt-2 overflow-hidden text-ellipsis">
                {{ item.indicatorName }}
              </div>
            </ElTooltip>
          </div>
          <VChart ref="chartRef" :option="getOption(item)" theme="dark" style="height: 50px" />
        </div>
      </div>
    </div>
  </div>
</template>
